<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <!-- 顶部工具栏 -->
        <el-row type="flex">
          <el-col>
            <el-button type="primary" plain @click="show = true">添加客户</el-button>
          </el-col>
          <el-col>
            <el-row type="flex">
              <el-select v-model="value" placeholder="全部经纪" @change="searchFn">
                <el-option value="">全部经纪</el-option>
                <el-option v-for="i in mangerList" :key="i.id" :label="i.name" :value="i.id" />
              </el-select>
              <el-input v-model="nameInput" placeholder="请输入名称进行筛选" />
              <el-button type="primary" plain @click="queryList">筛选</el-button>
            </el-row>
          </el-col>
        </el-row>
        <el-divider />
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            label="序号"
            align="center"
            type="index"
            width="80"
          />
          <el-table-column
            prop="img"
            label="图片"
            width="180"
            align="center"
          >
            <template slot-scope="{row}">
              <img :src="row.image" style="width:180px;height:120px;object-fit:contain" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="名称"
            align="center"
          />
          <el-table-column
            prop="email"
            label="邮箱"
            align="center"
          />
          <el-table-column
            prop="phone"
            label="电话"
            align="center"
          />
          <el-table-column
            prop="agent.name"
            label="经纪人"
            align="center"
          />
          <el-table-column
            prop="wechat"
            label="微信"
            align="center"
          />
          <el-table-column
            prop="desc"
            label="介绍"
            align="center"
          />
          <el-table-column
            prop="date"
            label="操作"
            align="center"
            width="150"
          >
            <template slot-scope="{row}">
              <el-button type="primary" plain size="small" @click="editFn(row.id)">编辑</el-button>
              <el-button type="danger" plain size="small" @click="delFn(row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-divider />
        <el-row type="flex" justify="center" align="middle" style="height: 60px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="limit"
            @current-change="onChange"
          />
        </el-row>
      </el-card>
      <AddDialog ref="AddDialog" :dialog-form-visible.sync="show" @addEvent="allFn" />
    </div>
  </div>
</template>

<script>
import { getClientsList, getClientsCount, getClient, delClient } from '@/api/clients'
import AddDialog from './components/add-dialog.vue'
import { getMangerList } from '@/api/managerList'

export default {
  components: { AddDialog },
  data() {
    return {
      tableData: [],
      show: false,
      total: 0,
      limit: 3,
      start: 0,
      mangerList: [],
      value: '', // 经纪人搜索绑定的输入框的值
      nameInput: '' // 名称搜索绑定的输入框的值
    }
  },
  created() {
    this.allFn()
  },

  methods: {
    allFn() {
      this.getClientsList()
      this.getMangerList()
      this.getClientsCount()
    },
    // 获取数据列表
    async getClientsList() {
      const res = await getClientsList({ _limit: this.limit, _start: this.start, name_contains: this.nameInput || null, agent: this.value || null })
      this.tableData = res.data
    },
    // 获取经纪人列表
    async getMangerList() {
      const res = await getMangerList()
      this.mangerList = res.data
    },
    // 获取数量
    async getClientsCount() {
      const res1 = await getClientsCount({ name_contains: this.nameInput || null, agent: this.value || null })
      this.total = res1.data
    },
    // 编辑
    async editFn(id) {
      this.show = true
      const res = await getClient(id)
      console.log(124, res)
      this.$refs.AddDialog.form = res.data
      this.$refs.AddDialog.form.agent = res.data.agent.id
      this.$refs.AddDialog.fileList.push({ url: res.data.image })
    },
    // 删除
    delFn(id) {
      this.$confirm('确定删除此客户吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        await delClient(id)
        if (this.tableData.length === 1 && this.start >= this.limit) {
          this.start -= this.limit
        }
        this.allFn()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 实现关键字搜索
    async queryList() {
      this.getClientsList()
      this.getClientsCount()
    },
    // 实现经纪人搜索
    async searchFn() {
      this.getClientsList()
      this.getClientsCount()
    },
    // 换页
    async onChange(curPage) {
      this.start = (curPage - 1) * this.limit
      await this.getClientsList()
    }
  }
}
</script>

<style>

</style>

